﻿@page
@{ Layout = "_Layout"; }
@section Styles{
  <style>
    .el-upload, .el-upload-dragger {
        width: 150px;
    }
  </style>
}

<el-form v-on:submit.native.prevent ref="form" :model="form" size="small" status-icon label-width="140px">
  <el-form-item label="账号" prop="userName" :rules="[{ required: true, message: '请输入账号' }]">
    <el-input v-model="form.userName" :disabled="userId > 0"></el-input>
    <small class="tips">账号用于登录系统</small>
  </el-form-item>
  <el-form-item label="姓名" prop="displayName" :rules="[{ required: true, message: '请输入姓名' }]">
    <el-input v-model="form.displayName"></el-input>
  </el-form-item>
  <el-form-item v-if="userId === 0" label="密码" prop="password" :rules="[{ required: true, message: '请输入密码' }]">
    <el-input v-model="form.password" type="password" name="password" autocomplete="off"></el-input>
  </el-form-item>
  <el-form-item v-if="userId === 0" label="确认密码" prop="confirmPassword" :rules="[{ required: true, message: '请输入确认密码' }, { validator: validatePass }]">
    <el-input v-model="form.confirmPassword" type="password" name="confirmPassword" autocomplete="off"></el-input>
  </el-form-item>
  <el-form-item label="头像">
    <el-upload
      :action="uploadUrl"
      :file-list="uploadFileList"
      :headers="{Authorization: 'Bearer ' + $token}"
      list-type="picture-card"
      :before-upload="uploadBefore"
      :on-progress="uploadProgress"
      :on-success="uploadSuccess"
      :on-error="uploadError"
      :on-remove="uploadRemove"
      :multiple="false">
      <i class="el-icon-plus"></i>
    </el-upload>
  </el-form-item>
  <el-form-item label="手机号码" prop="mobile" :rules="[{ validator: utils.validateMobile, message: '字段必须是有效的手机号码' }]">
    <el-input v-model="form.mobile"></el-input>
    <small class="tips">可用于登录、找回密码等功能</small>
  </el-form-item>
  <el-form-item label="电子邮箱" prop="email" :rules="[{ type: 'email', message: '请输入正确的邮箱地址' }]">
    <el-input v-model="form.email"></el-input>
    <small class="tips">可用于登录、找回密码等功能</small>
  </el-form-item>
</el-form>

<el-divider></el-divider>
<el-row align="right" style="margin-right: 5px; margin-top: 10px;">
  <el-col :span="24" align="right">
    <el-button type="primary" v-on:click="btnSubmitClick" size="small">确 定</el-button>
    <el-button size="small" v-on:click="btnCancelClick">关 闭</el-button>
  </el-col>
</el-row>

@section Scripts{
<script src="/sitefiles/assets/js/admin/settings/administratorsLayerProfile.js" type="text/javascript"></script> }